<template>
	<view class="setingBox">
		
		<view class="top">
			<text class="gaodu">亮度</text>
			<view class="innerslider">
				<uni-icons type="eye"></uni-icons>
					<slider class="sliders" value="12" @change="sliderChange"/>
				<uni-icons type="eye-filled"></uni-icons>
			</view>
		</view>
		
		<view class="bottom">
			<text class="gaodu">字号</text>
			<view class="fontset">
				<button class="mini-btn-left" type="default" size="mini"> A- </button>
				<button class="mini-btn" type="default" size="mini"> 16 </button>
				<button class="mini-btn-right" type="default" size="mini"> A+ </button>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		methods: {
			sliderChange(value) {
				console.log(value)
			}
		},
	}
</script>

<style lang="scss"  scoped>
.setingBox{
	display: flex;
	flex-direction: column;
	.top{
		padding: 1vh;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	
		.innerslider{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
		}
		
		
		.sliders{
			width: 100%;
		}
	}
.bottom{
		display: flex;
		padding-left: 1vh;
		justify-content: space-between;
		.fontset{
			margin-right: 10vh;
			button{
				border: 1px solid #000000;
			}
			.mini-btn{
				border-right: none;
				border-left: none;
				width: 14vh;
			}
			.mini-btn-left{
				border-top-left-radius:50%;
				border-top-right-radius:0;
				border-bottom-right-radius:0;
				border-bottom-left-radius:50%;
			}
			.mini-btn-right{
				border-top-left-radius:0;
				border-top-right-radius:50%;
				border-bottom-right-radius:50%;
				border-bottom-left-radius:0%;
			}
		}
	}
}
.gaodu{
	width: 45px;
}

</style>
